import { Button, ConfigProvider, Slider, Space, theme } from 'antd';
import { useState, useEffect, useRef } from 'react'
import './index.less'
import { PauseCircleOutlined, PlayCircleOutlined } from '@ant-design/icons';
import dayjs from 'dayjs';
import { lengthTo4326 } from '../../../../../../../../utils/helper/mapHelper';

const duration = require('dayjs/plugin/duration')
dayjs.extend(duration)

export const toText = (kssc, dw, dw2) => {
    const obj = dayjs.duration(kssc, dw2 || 'm')
    const d = obj.$d.days ? `${obj.$d.days}天` : '';
    const h = obj.$d.hours ? `${obj.$d.hours}小时` : '';
    const m = obj.$d.minutes ? `${obj.$d.minutes}分钟` : '';
    switch (dw) {
        case 'd':
            return `${d}${h}后`
        case 'h':
            return `${h}${m}后`;
        case 'm':
            return `${m}后`
        default:
    }
    return ``
}

export default function Player(props) {
    const { timeStep = 10, currentCircle, radius, kssc, dw } = props;
    const [sliderValue, setSilderValue] = useState(0);
    const [isPlay, setIsPlay] = useState(true);

    useEffect(() => {
        const gap = 100 / ((timeStep * 1000) / 16);
        if (isPlay) {
            const interval = setInterval(() => {
                setSilderValue(v => {
                    const result = v + gap;
                    if (result > 100) {
                        return 0;
                    }
                    return v + gap;
                })
            }, 16)
            return () => {
                clearInterval(interval);
            }
        }
    }, [timeStep, isPlay])

    useEffect(() => {
        const gapRadius = lengthTo4326(radius * ((sliderValue || 1) / 100));
        currentCircle.setRadius(gapRadius)
    }, [currentCircle, radius, sliderValue]);

    const textRef = useRef();
    const text = toText(kssc * ((sliderValue || 1) / 100), dw)
    if (textRef.current !== text) {
        textRef.current = text;
    }

    return <div className='layout-h center j-center' style={{
        position: "fixed",
        left: 480,
        // width: 700,
        // height: 60,
        bottom: 0,
        background: "rgba(0, 0, 0, 1)",
        borderRadius: 8,
        padding: "8px 16px 8px 16px"
    }}>
        <div style={{
            marginRight: 12
        }}>
            <Button onClick={e => {
                setIsPlay(!isPlay);
            }} icon={isPlay ? <PauseCircleOutlined /> : <PlayCircleOutlined />} size="small" shape='circle' />
        </div>
        <div className='layout-h center'>
            <div style={{
                width: 500
            }}>
                <ConfigProvider theme={{
                    algorithm: theme.defaultAlgorithm,
                    token: {
                        colorPrimary: '#1677ff',
                        // colorPrimary: '#1E5363',
                        colorBgContainer: '#ffffff',
                        colorBgElevated: '#ffffff',
                        colorTextBase: '#000',
                        colorPrimaryBg: "#e6f4ff"
                    }
                }}>
                    <Slider tooltip={{
                        open: false
                    }} style={{
                        marginBottom: 11
                    }}
                        // marks={marks}
                        value={sliderValue} onChange={value => {
                            setSilderValue(value)
                            setIsPlay(false);
                            props.onChange?.()
                        }} format />
                </ConfigProvider>
            </div>
            <div style={{
                marginLeft: 12,
                textWrap: 'nowrap',
                minWidth: 120,
                // textAlign: "right"
                // width: 120
            }}>{textRef.current}</div>

        </div>
    </div>;
}